<script setup>
import { ref, computed } from 'vue'

import { ElMessage } from "element-plus"
import { request } from '@/utils/axios/request.js'
import local from '@/components/local.vue'

let locabob = ref(false)

let role = ref('')
let operator = ref('')
let option = [
    {
        value: '超级管理员',
        label: '超级管理员',
    },
    {
        value: '普通管理员',
        label: '普通管理员',
    },
    {
        value: '普通员工',
        label: '普通员工',
    },
]


let currentPage = ref(1);
let pageSize = ref(10);

let systemlog = ref([])

let findAll = async () => {
    try {
        locabob.value = true
        let resData = await request({
            url: '/admin/user/usersAll',
            method: 'get',
        })
        resData.data.forEach(item => {
            item.role = item.role == 0 ? '超级管理员' : item.role == 1 ? '普通管理员' : '普通员工'
            item.status = item.status == 1 ? '正常' : '停用'
        })
        systemlog.value = resData.data.sort((a,b)=>b.id-a.id)
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
}
//请求数据
findAll()

sessionStorage.setItem('systemlog1', JSON.stringify(systemlog.value))
let systemlogDate = computed(() => {
    let statIndex = (currentPage.value - 1) * pageSize.value
    let endIndex = currentPage.value * pageSize.value
    return systemlog.value.slice(statIndex, endIndex);
})
//重置
let closed = () => {
    findAll()
    operator.value = ''
    role.value = ''
}
//搜索
let search = async () => {
    try {
        locabob.value = true
        let character = role.value == '超级管理员' ? 0 : role.value == '普通管理员' ? 1 : role.value == '普通员工' ? 2 : ''
        let newdata = await request({
            url: `/admin/user/users?username=${operator.value}&role=${character}`,
            method: 'get'
        })
        newdata.data.forEach(item => {
            item.role = item.role == 0 ? '超级管理员' : item.role == 1 ? '普通管理员' : '普通员工'
            item.status = item.status == 1 ? '正常' : '停用'
        })
        systemlog.value = newdata.data
        // 显示成功信息
        ElMessage.success("查询成功")
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
}

</script>

<template>
    <div class="container">
        <local v-show="locabob" />
        <div class="SystemLog">
            <p>账号:&nbsp;</p>
            <p><el-input v-model="operator" placeholder="请输入操作人员" /></p>
            <p>角色:&nbsp;</p>
            <p>
                <el-select v-model="role" class="m-2" placeholder="请选择角色">
                    <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </p>
            <p><el-button type="primary" @click="search">搜索</el-button></p>
            <p><el-button @click="closed">重置</el-button></p>
        </div>
        <div class="systemLogNav">
            <el-table ref="multipleTableRef" :data="systemlogDate">
                <el-table-column fixed prop="nickname" label="姓名" />
                <el-table-column fixed prop="username" label="账号" />
                <el-table-column property="role" label="角色" />
                <el-table-column property="department" label="部门" />
                <el-table-column property="created_at" label="创建时间" />
                <el-table-column property="created_login" label="登录时间" />
            </el-table>
        </div>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper" :total="systemlog.length" />
        </div>
    </div>
</template>

<style scoped lang="less">
.container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px);

    .SystemLog {
        margin-top: 10px;
        display: flex;
        flex-shrink: 0;
        height: 50px;
        line-height: 50px;
        background-color: #f9f9f9;

        p {
            font-size: 14px;
            font-weight: 700;

            &:nth-child(1),
            &:nth-child(3) {
                margin-left: 20px;
            }

            &:nth-child(5) {
                margin-left: 20px;
                margin-right: 10px;
            }
        }
    }

    .export {
        margin-left: 17%;
    }

    .systemLogNav {
        display: flex;
        padding: 0 20px;
    }

    .demo-pagination-block {
        padding-bottom: 40px;
        overflow: hidden;
        align-self: center;
    }

    &:nth-child(8) {

        color: #44a5ff;
    }

}
</style>
